﻿@*
    ************************************************************************************************************************************************
    视图使用 Razor 模板语言编写
    混合了 HTML 和 C# 的代码
    用以从视图模型里抽取数据并转换为文本或者 HTML。这些 C# 语句以符号 @ 作为前缀
    由 TodoController 中的 action Index 生成的视图(View)，需要从视图模型(ViewModel)（一个待办事项的数组）获取数据，并用一个适当的表格展示给用户。
    视图要置于 Views 目录里，在一个与所属控制器同名的子目录下。
    视图文件的文件名就是 action 的名字加上一个 .cshtml 扩展名
    ------------------------------------------------------------------------------------------------------------------------------------------------
    @model 指令告诉Razor该View绑定到 TodoViewModel,通过Model 属性访问(就是var Model = new TodoViewModel,View.Datacontext = Model)
    ------------------------------------------------------------------------------------------------------------------------------------------------
    div 可以理解为Border
    ------------------------------------------------------------------------------------------------------------------------------------------------
    <body> 标签，或者 页首 和 页脚 在哪儿？ASP.NET Core 使用一个布局视图，用以定义容纳视图的基础结构的其余部分。布局视图被保存在 Views/Shared/_Layout.cshtml。
    默认的 ASP.NET Core 模板在布局文件中包含了 Bootstrap 和 jQuery，便于你快捷地创建一个 web 应用程序。当然，只要你愿意，你可以使用自己的 CSS 和 JavaScript 库。
    ------------------------------------------------------------------------------------------------------------------------------------------------
    ************************************************************************************************************************************************
*@
@{
}

@using Humanizer
@model TodoViewModel
@{
    ViewData["Title"] = "Manage your todo list";
}

<div class="panel panel-default todo-panel">
    <div class="panel-heading">@ViewData["Title"]</div>
    <table class="table table-hover">
        <thead>
            <tr>
                <td>&#x2714;</td>
                <td>Item</td>
                <td>Due</td>
            </tr>
        </thead>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>
                    <input type="checkbox" class="done-checkbox" />
                </td>
                <td>@item.Title</td>
                <td>@item.DueAt.Humanize()</td>
            </tr>
        }
    </table>

    <div class="panel-footer add-item-from">

    </div>
</div>
